<template>
  <div class="wap-nav">
    <!-- 语言 -->
    <div class="lang">
      <div v-show="!langSel" class="langActive" @click="langSel = true;langMantle=true">
        {{showLang}}
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div v-show="langSel" @click="langSel = false;langMantle=false">
        <img src="../../../../assets/imgs/close1.png" alt class="closeImg" />
      </div>
    </div>
    <!-- 选择语言 -->
    <div class="langSelBox" v-if="langSel">
      <div
        class="list"
        v-for="item in langList"
        :key="item.id"
        @click="handleClickLang(item.id)"
      >{{item.name}}</div>
    </div>
    <template v-for="i in navList">
      <a
        :key="i.id"
        href="javascript:;"
        class="icon"
        :class="active.id == i.id ? 'active' : ''"
      >
        <i
          @click.stop="navClick(i.id)"
          :class="`icon-path-${i.id}` + (active.id == i.id ? ' active' : '')"
        ></i>
        <template v-if="i.id == '2' && active.id == '2' && active.open">
          <span class="subIcons">
            <a href="javascript:;" @click="openFloor" class="icon">
              <img src="../../../../assets/imgs/foundation/6.png" />
            </a>
            <a href="tel:400-612-4878" class="icon" v-if="lang=='zh'">
              <img src="../../../../assets/imgs/foundation/2.png" />
            </a>
            <!-- 联系我们-->
            <a href="javascript:void(0)" class="icon" @click="contactUs"><img src="../../../../assets/imgs/foundation/10.png" /></a>
            <!-- <a href="javascript:void(0)" class="icon" v-if="lang=='en'">
              <img src="../../../../assets/imgs/foundation/2.png" />
            </a> -->
          </span>
        </template>
      </a>
    </template>
    <div class="aboutList" v-if="active.id == '1' && active.open">
      <ul>
        <template v-for="i in navAboutItem">
          <li :key="i.id" @click="navTo(i.path, i.id)">
            <span :class="`foundation-about-${i.id}`"></span>
            <p>{{ i.label }}</p>
          </li>
        </template>
      </ul>
    </div>
    <div class="layer" v-if="active.open"></div>

    <div v-if="mantle" class="mantle-wrap">
      <floor-box @handleMantle="handleMantle"></floor-box>
    </div>
    <!-- 语言蒙层 -->
    <div class="v-modal" style="z-index: 9;" v-if="langMantle"></div>
  </div>
</template>

<script>
import floorBox from "componentsPath/common/wap/floorBox";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    floorBox
  },
  data() {
    return {
      langSel: false, // 选择语言
      langMantle: false, // 语言蒙层
      langList: [
        {
          id: 'en',
          name: 'EN'
        },
        {
          id: 'zh',
          name: 'CN'
        }
      ],
      mantle: false,
      active: {
        id: "",
        open: false
      },
      navList: [
        {
          icon: "/assets/imgs/foundation/3.png",
          id: "1"
        },
        {
          icon: "/assets/imgs/foundation/3.png",
          id: "2"
        },
        {
          icon: "/assets/imgs/foundation/m6.png",
          id: "3"
        },
        {
          icon: "/assets/imgs/foundation/4.png",
          id: "4"
        }
      ],
    };
  },
  computed: {
    ...mapState(["lang", "userInfo"]),
    showLang() {
      return this.lang === 'zh' ? 'CN' : this.lang.toUpperCase()
    },
    navAboutItem() {
      if(this.lang == 'zh') {
        return [
          { id: 1, label: "公司概况", path: "/foundation/wap/aboutUsList" },
          { id: 2, label: "接待中心", path: "/foundation/wap/home?floor=1.2" },
          { id: 3, label: "产品展示区", path: "/foundation/wap/home?floor=1.1" },
          { id: 4, label: "用户中心", path: "/foundation/wap/infoindex" }
        ]
      } else {
        return [
          { id: 1, label: "Company Profile", path: "/foundation/wap/aboutUsList" },
          { id: 2, label: "Reception Center", path: "/foundation/wap/home?floor=1.2" },
          { id: 3, label: "Display Area", path: "/foundation/wap/home?floor=1.1" },
          { id: 4, label: "Customer Center", path: "/foundation/wap/infoindex" }
        ]
      }
    }
  },
  methods: {
    ...mapMutations(['changeLang']),
    // 切换语言
    handleClickLang(command) {
      this.$i18n.locale = command
      this.changeLang(command)
      this.langSel = false
      this.langMantle = false
    },
    handleMantle() {
      this.mantle = !this.mantle;
    },
    openFloor() {
      this.active.id = "";
      this.active.open = false;
      this.handleMantle();
    },
    contactUs() {
      // 联系我们
      let langC ="";
      if(this.lang == 'zh') {
          langC="zh-cn"
      } else {
       langC='en'
      }
      let url = `https://www.covestro.com/${langC}/contact`;
      window.open(url, "_blank");
      return false;
    },
    navClick(id) {
      if (id == "4") {
        if (!this.userInfo) {
          this.$router.push({
            path: `login`
          });
          return false;
        }
        this.$router.push({
          path: "/foundation/wap/search"
        });
      } else if (id == "3") {
        let lang = localStorage.getItem("lang");
        let url = `https://solutions.covestro.com/${lang}/account/register`;
        window.open(url, "_blank");
        return false;
      }
      if (!this.active.open) {
        this.active.id = id;
        this.active.open = true;
      } else {
        this.active.id = "";
        this.active.open = false;
      }
    },
    navTo(path, id) {
      if (id == "4") {
        console.log();
        if (!this.userInfo) {
          this.$router.push({
            path: `login`
          });
          return false;
        }
      }
      this.$router.push({
        path
      });
      this.active.id = "";
      this.active.open = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.wap-nav {
  position: absolute;
  z-index: 9;
  right: 10px;
  top: 20px;
  padding-top: 40px;
  .lang {
      position: absolute;
      top: 0;
      z-index: 10;
      font-size: 14px;
      .langActive {
        width: 50px;
        height: 25px;
        background: #ffffff91;
        border-radius: 15px;
        text-align: center;
        line-height: 26px;
      }
      .closeImg {
        width: 50px;
        height: 25px;
      }
      i {
        margin-left: -3px;
      }
    }
    .langSelBox {
      position: absolute;
      z-index: 10;
      top: 0;
      left: -130px;
      width: 130px;
      .list {
        float: left;
        width: 50px;
        height: 25px;
        line-height: 26px;
        background: #fff;
        color: #333;
        text-align: center;
        border-radius: 15px;
        margin-right: 12px;
        font-size: 14px;
      }
    }
  .mantle-wrap {
    position: fixed;
    left: 0;
    top: 15%;
    width: 100%;
    z-index: 9;
  }
  span.icon{
    display: block;
    height: 52px;
    width: 52px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  }
  a {
    display: block;
    height: 52px;
    width: 52px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 50%;
    // box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    i {
      display: block;
      height: 52px;
      width: 52px;
      background-size: 100% 100%;
      &.icon-path-1 {
        background-image: url(../../../../assets/imgs/foundation/3.png);
      }
      &.icon-path-2 {
        background-image: url(../../../../assets/imgs/foundation/7.png);
      }
      &.icon-path-3 {
        background-image: url(../../../../assets/imgs/foundation/m6.png);
      }
      &.icon-path-4 {
        background-image: url(../../../../assets/imgs/foundation/4.png);
      }
      &.active {
        background-image: url(../../../../assets/imgs/foundation/1.png);
      }
    }
    img {
      display: block;
      height: 52px;
      width: 52px;
    }
    &.active {
      opacity: 1;
      z-index: 3;
    }
    .subIcons {
      position: absolute;
      right: 67px;
      top: 0;
      width: 210px;
      text-align: right;
      .icon {
        display: inline-block;
        margin: 0 0 0 15px;
      }
    }
  }
  .aboutList {
    position: fixed;
    top: 130px;
    z-index: 3;
    left: 28px;
    right: 28px;
    ul {
      li {
        width: 100%;
        height: 60px;
        background: #ffffff;
        box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
        opacity: 0.9;
        border-radius: 10px;
        line-height: 60px;
        padding-left: 28px;
        margin-bottom: 30px;
        display: flex;
        span {
          display: inline-block;
          height: 30px;
          width: 30px;
          background-size: 140% 140%;
          background-position: center center;
          margin: 15px 10px 0 0;
        }
        p {
          flex: auto;
        }
        .foundation-about-1 {
          background-image: url(../../../../assets/imgs/foundation/a1.png);
        }
        .foundation-about-2 {
          background-image: url(../../../../assets/imgs/foundation/a2.png);
        }
        .foundation-about-3 {
          background-image: url(../../../../assets/imgs/foundation/a3.png);
        }
        .foundation-about-4 {
          background-image: url(../../../../assets/imgs/foundation/a4.png);
        }
      }
    }
  }
  .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.4);
  }
}
</style>
